<template>
    <div class="cakeTags">
      <ul>
        <li v-for="(tag, $index) in tags" :key="tag.id"
            @click="selectTagItem(tag, $index)">
          <span :class="{'selected': tag.selected}"></span>
        </li>
      </ul>
    </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'

export default {
  props: {
    tags: Object,
    index: [String, Number]
  },
  data () {
    return {
      selected: false
    }
  },
  methods: {
    selectTagItem (item, index) {
      this.$nextTick(function () {
        this.tags.forEach(function (item) {
          Vue.set(item, 'selected', false)
        })
        Vue.set(item, 'selected', true)
      })
    }
  }
}
</script>

<style lang="less">

</style>
